<template>
  <section class="pagemaker-list-inner">
    <section class="main-search merge">
      <span class="svg-container">
        <svg-icon icon-class="search" />
      </span>
      <el-input
        v-model.trim="name"
        placeholder="输入组件名称搜索"
        class="search-input"
        clearable
        @clear="clearSearchTree"
        @keyup.enter.native="searchList"
      />
      <section class="search-btn">
        <el-button class="filter-item" type="primary" @click="searchList">
          搜索
        </el-button>
      </section>
    </section>
    <div class="list-box">
      <div v-for="(item, index) in list" class="list-warp" :key="index">
        <div class="sort">{{ item.classifyName }}</div>
        <div class="comps">
          <template  v-for="(m, n) in item.pageInfo">
            <div v-if="m.componentName!=='首页底部导航'" :key="n" class="inner">
              <div class="comp" draggable="true"  @dragstart="dragStart($event, m)">
                <!--            <div class="icon">
                  <icon :name="`${m.type}-icon`" />
                </div>-->
                <div class="name">{{ m.componentName }}</div>
                <div class="move" title="点击查看缩略图" @click="look(m)">
                  <!--              <icon name="move-icon" />-->
                  <icon name="image" />
                </div>
              </div>
            </div>
          </template>
        </div>
      </div>
    </div>
    <el-dialog
        v-el-drag-dialog
        :close-on-click-modal="false"
        append-to-body
        :title="'组件介绍'"
        :visible.sync="lookVisible"
        center
        width="750px"
    >
      <div style="max-height: 500px;overflow-y: auto">
        <h3>图片</h3>
        <div style="text-align: center;" v-if="cur.icon && cur.icon!==''">
          <el-image
              style="height: auto;width: auto;"

              :src="cur.icon"></el-image>
        </div>
        <el-tag type="danger" v-else>暂无图片</el-tag>

        <h3>说明</h3>
        <el-tag type="danger">{{cur.comDesc||'暂无说明'}}</el-tag>
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button style="padding: 8px 30px;" @click="lookVisible = false;cur={}">关闭</el-button>
      </div>
    </el-dialog>
  </section>
</template>
<script>
import elDragDialog from '@/directive/el-drag-dialog'
export default {
  name: 'PagemakerList',
  directives: { elDragDialog },
  props: {
    list: {
      type: [Array, String, undefined, null],
      default: []
    }
  },
  data() {
    return {
      lookVisible:false,
      name: '',
      cur:{}
    }
  },
  methods: {
    clearSearchTree(){
      this.name=''
      this.$emit('search', this.name)
    },
    look(m){
      this.cur=m
      this.lookVisible=true
    },
    searchList() {
      this.$emit('search', this.name)
    },
    dragStart(e, m) {
      e.dataTransfer.setData('type', 'adder')
      e.dataTransfer.setData('name', m.code)
      this.dispatch_event('drag-start', { type: 'adder' })
    }
  }
}
</script>
<style lang="scss">
.main-search {
  background-color: #fff;
  padding: 0 10px;
  .svg-container {
    padding: 0 5px 0 10px;
    color: #bfced6;
    vertical-align: middle;
    display: inline-block;
  }
  .search-input {
    width: 50%;
    position: relative;
    &:after {
      content: '';
      position: absolute;
      left: -25px;
      right: 0;
      bottom: 8px;
      height: 1px;
      background: rgba(226, 227, 232, 1);
    }
    input {
      outline: none;
      background: transparent;
      border: none;
      outline: medium;
      padding: 0;
      &:focus {
        outline: none;
        background-color: transparent;
      }
    }
  }
  .search-btn {
    display: inline-block;
    float: right;
    .el-button.is-round {
      padding: 10px 30px;
      margin-right: 34px;
    }
    .search-more {
      font-size: 14px;
      font-weight: 500;
      @include font-color($mainColor);
      cursor: pointer;
      margin-left: 10px;
    }
  }

  &.merge {
    height: 50px;
    line-height: 50px;
  }
}
</style>
<style lang="scss" scoped>
@import '@/styles/mixin.scss';
@import '@/styles/var.scss';
@import '@/styles/utility/position.scss';
@import '@/styles/utility/shadow.scss';
.pagemaker-list-inner {
  //@include absolute();
  //overflow: auto;\
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow-y: hidden;
  .list-box{
    flex: 1;
    overflow-y: auto;
    .list-warp {
      .sort {
        line-height: 35px;
        padding: 0 15px 0 15px;
        font-size: 12px;
        background: $f8;
        border-bottom: 1px solid $f6;
        position: sticky;
        top: 0;
        color: $a1;
      }
      .comps {
        padding-left: 10px;
        border-bottom: 1px solid $f6;
        .inner {
          box-sizing: border-box;
          display: inline-block;
          vertical-align: top;
          width: 50%;
        }
        .comp {
          background: $f9;
          line-height: 35px;
          border: 1px solid $f6;
          display: flex;
          align-items: center;
          margin: 5px 10px 5px 0;
          border-radius: 3px;
          cursor: move;
          transition: all ease-in 0.2s;
          .icon {
            width: 40px;
            text-align: center;
            font-size: 15px;
            color: $a1;
            display: inline-flex;
            align-items: center;
            justify-content: center;
          }
          .name {
            padding: 0 5px;
            font-size: 12px;
            flex: 1;
          }
          .move {
            width: 30px;
            text-align: center;
            color: $f5;
            cursor: pointer;
          }
          &:hover {
            border: 1px solid transparent;
            @include boxShadow(3);
          }
        }
      }
    }
  }

}
</style>
